<template>
  <view>
    <cu-custom bgColor="bgmain" :isBack="true">
      <view slot="content">历史接单</view>
    </cu-custom>
    <view class="container">
      <view class="modal" v-if="getUseInfo">
        <view class="m_box tc">
          <view class="title">提示</view>
          <view class="fs30 p20">请先开启用户授权</view>
          <view class="border_top_2">
            <button @getuserinfo="getUsetInfo" class="m_btn" openType="getUserInfo">确定</button>
          </view>
        </view>
      </view>

      <view class="page">
        <view class="tabBars row margin-bottom">
          <view class="tabBar" :class="{ cur: typeFlg == 0 }" @click="changeType(0)">外卖单
            <view class="numss" v-if="nums1 > 0">{{ nums1 }}</view>
          </view>
          <view class="tabBar" :class="{ cur: typeFlg == 1 }" @click="changeType(1)">跑腿单
            <view class="numss" v-if="nums2 > 0">{{ nums2 }}</view>
          </view>
        </view>
        <scroll-view scroll-x class="nav text-center bg-white" scroll-with-animation :scroll-left="scrollLeft">
          <view class="flex text-center" style="flex: 1">
            <view :class="'cu-item  flex-sub ' + (0 == TabCur ? 'text-white cur' : '')" @tap="tabSelect" data-id="0"
              data-index="3">待取货</view>
            <view :class="'cu-item flex-sub ' + (1 == TabCur ? 'text-white cur' : '')" @tap="tabSelect" data-id="1"
              data-index="7">待送达</view>
            <view :class="'cu-item flex-sub ' + (11 == TabCur ? 'text-white cur' : '')" @tap="tabSelect" data-id="11"
              data-index="11">已送达</view>

            <view :class="'cu-item flex-sub ' + (2 == TabCur ? 'text-white cur' : '')" @tap="tabSelect" data-id="2"
              data-index="4">已完成</view>
            <view :class="'cu-item flex-sub ' + (9 == TabCur ? 'text-white cur' : '')" @tap="tabSelect" data-id="9"
              data-index="9">取消中</view>
          </view>
        </scroll-view>

        <view class="page-container">

          <view class="block" style="width: 100%" v-if="list.length == 0">
            <view class="col-1 nodata" style="margin: 100rpx auto; text-align: center; width: 100%"
              v-if="list.length == 0">
              <view class="padding-sm" style="flex: 1">
                <view class="padding radius text-center light">
                  <text class="cuIcon-infofill lg text-lg" style="font-size: 50rpx"></text>
                  <view class="text-lg padding-tb-sm'">暂无数据</view>
                </view>
              </view>
            </view>
          </view>

          <view class="block margin-lr" style="width:690rpx;" v-if="list.length > 0">
            <!-- <view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
                            <view class="tower-item" :class="Kitem.zIndex == 1 ? 'none' : ''" v-for="(Kitem, Kindex) in swiperList" :key="Kindex" :style="[{ '--index': Kitem.zIndex, '--left': Kitem.mLeft }]" :data-direction="direction">
                                <view class="swiper-item bg-white" style="width:300rpx;height:300rpx;">
                                    {{Kindex}}
                                </view>
                            </view>
                        </view> -->
            <block v-for="(items, indexs) in list" :key="indexs">
              <view class="margin-top"></view>
              <view class="names row" @click="tagetFlg(indexs)" v-if="typeFlg == 0">{{ items.business_name }}
                <view class="row">
                  <view class="nums">{{ items.list.length }}</view>
                  <view class="cuIcon-right"></view>
                </view>
              </view>

              <!-- <swiper
                                    1 3000 
                                :indicator-dots="list.length>1"
                                autoplay
                                circular
                                style="height:450rpx;"
                            > -->
              <block v-for="(item, index) in items.list" :key="index" v-if="openFlg == indexs || typeFlg == 1">
                <!-- {{  items.business_name }} -->
                <!-- <swiper-item> -->
                <!-- {{ item.id }} -->
                <view class="box bg-white padding align-center" @tap="detail" :data-index="index" :data-id="item.id">
                  <view class="flex align-center justify-between">
                    <view class="text-lg text-bold text-black">{{ item._type_txt }}

                      {{ item.type == 3 ? "-" : "" }}

                      {{ item.type != 4 ?
                        (item.type == 3 ? (items.business_name || "") : "") : "" }}</view>
                    <view style="display:flex;">
                      <view class="status_btn addjia" v-if="item.is_plus == 1">有加价</view>
                      <view class="status_btn" style="flex-shrink: 0;">{{ item._status_txt }}</view>
                    </view>

                  </view>
                  <view class="time">{{ item.create_time }}</view>
                  <view class="flex addr_box align-center">
                    <view class="" style="width: 80%;">
                      <view class="flex align-center">
                        <view class="blue circle"></view>
                        <view class="addr margin-left" v-if="item.type == 3">{{ items.business_address }}</view>
                        <view class="addr margin-left" v-else>{{ item.type != 4 ? item.qu_addres : item.remarks }}</view>
                      </view>
                      <text class="cuIcon-moreandroid" v-if="item.type != 4 || item.sh_addres != ''"></text>
                      <view class="flex align-center" v-if="item.type != 4 || item.sh_addres != ''">
                        <view class="orange circle"></view>
                        <view class="addr margin-left">{{ item.sh_addres }}</view>
                      </view>
                    </view>
                    <view class="text-lg text-red text-bold">￥{{ item.total }}</view>
                  </view>
                  <!-- <view class="flex margin-top operate_box">
                                                    <view class="operate active" @click.stop="handleQd" :data-id="item.id">抢单</view>
                                                </view> -->
                </view>

                <!-- </swiper-item> -->

              </block>
              <!-- </swiper> -->

            </block>


          </view>

          <view class="block" style="width: 100%" v-if="list.length > 0 && 1 == 2">
            <view class="box bg-white padding align-center margin-top" style="margin-top: 20rpx;"
              v-for="(item, index) in list" :key="index" @tap="detail" :data-index="index">
              <view class="flex align-center justify-between">
                <view class="text-lg text-bold text-black">{{ item._type_txt }}-{{ item.type != 4 ? (item.type == 3 ?
                  item.store_name : item.remarks) : item.title }}
                  <text v-if="item.pick_number">【{{ item.pick_number }}】</text>
                </view>
                <view class="status_btn" style="flex-shrink: 0;">{{ item._status_txt }}</view>
              </view>
              <view class="time">{{ item.create_time }}</view>
              <view class="flex addr_box align-center">
                <view class="" style="width: 80%;">
                  <view class="flex align-center">
                    <view class="blue circle"></view>
                    <view class="addr margin-left">{{ item.type != 4 ? item.qu_addres : item.remarks }}</view>
                  </view>
                  <text class="cuIcon-moreandroid" v-if="item.type != 4 || item.sh_addres != ''"></text>
                  <view class="flex align-center" v-if="item.type != 4 || item.sh_addres != ''">
                    <view class="orange circle"></view>
                    <view class="addr margin-left">{{ item.sh_addres }}</view>
                  </view>
                </view>
                <view class="text-lg text-red text-bold">￥{{ item.total }}</view>
              </view>

              <!-- <view class="address padding-left" v-if="item.type == '超市食堂'">商品信息：{{ item.good_details }}</view> -->

              <!-- <view class="address padding-left" v-if="item.qu_addres">取货地址：{{ item.qu_addres }}</view> -->

              <!-- <view class="address padding-left" v-if="item.sh_addres">收货地址：{{ item.sh_addres }}</view> -->
            </view>
          </view>





        </view>
      </view>
      <!-- <view class="cu-tabbar-height"></view> -->
    </view>
    <!-- <import src="/gc_school/pages/templates/footer.wxml" />
<template is="footerWx" data="{{...tabBar}}" /> -->

    <view class="cu-tabbar-height"></view>
    <!-- <view class="cu-bar tabbar foot bgmains" >
    <view class="action text-gray">
        <navigator url='/gc_school/pages/home/index' open-type="redirect" hover-class='none'>
           	<image id="cuIcon-homefills" src="/images/home.png"></image> 
               <view class="indedx">首页</view>
        </navigator>
    </view>
    <view class="action text-white  add-action">
        <navigator url='/gc_school/pages/order/index' open-type="redirect" hover-class='none'>
            <button class="cu-btn cuIcon-add bgmain shadow"><image id="cuIcon-homefillt" src="/images/publish.png"></image></button>
           <view style="color:black">我的发布</view>
        </navigator>
    </view>
    <view class="action text-gray">
        <navigator url='/gc_school/pages/user/index' open-type="redirect" hover-class='none'>
            <image id="cuIcon-homefills" src="/images/my.png"></image>
            <view class="indedxt">我的</view>
        </navigator>
    </view>
</view> -->

    <!-- <drag-button :fileUrl="fileUrl" class="aaa"> </drag-button> -->
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      TabCur: 0,
      scrollLeft: 0,
      page: 1,
      type: 3,
      loadmore: true,
      list: [],
      getUseInfo: '',
      types: [3, 7, 4, 9],
      timeList: [],
      flg: 0,
      typeFlg: 0,
      openFlg: 0,
      nums: 0,
      nums1: 0,
      nums2: 0
    };
  }
    /**
     * 生命周期函数--监听页面加载
     */,
  onLoad: function (options) {
    // options.nav=0
    this.TabCur = options.nav || 0
    this.type = this.types[this.TabCur]

    this.typeFlg = options.typeFlg || 0
    this.getData();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    app.globalData.util.footer(this);
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // this.page= 1
    // this.list=[]
    // this.getData();
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.pullDown.start()

    this.page = 1
    this.list = []
    this.getData();

  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.setData({
      page: this.page + 1
    });

    if (this.loadmore) {
      this.getData();
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {

    tagetFlg(flg = 0) {
      this.openFlg = this.openFlg == flg ? -1 : flg
    },
    changTime(index) {
      this.flg = index
      this.getData()
    },
    changeType(index) {
      this.typeFlg = index
      this.getData()
    },
    //详情跳转
    detail(e) {
      var that = this;

      if (uni.getStorageSync('user_identity') == 1) {
        uni.requestSubscribeMessage({
          tmplIds: [
            uni.getStorageSync('template_id'),
            uni.getStorageSync('cancel_template_id'),
            uni.getStorageSync('sys').template_cancel_rider
          ],
          // 此处可填写多个模板 ID，但低版本微信不兼容只能授权一个
          success(res) {
            console.log('已授权接收订阅消息');
          },

          complete() {
            uni.navigateTo({
              url: '/gc_school/pages/order/detail?id=' + e.currentTarget.dataset.id
            });
          }
        });
      } else {
        uni.navigateTo({
          url: '/gc_school/pages/order/detail?id=' + e.currentTarget.dataset.id
        });
      }
    },

    async getData() {

    
      // try {
      //   this.request("orders/seize_orderss", {
      //     s_id: uni.getStorageSync('schoolId'),
      //     type: 3,
      //     status: this.type,

      //   }).then(res => {
      //     this.nums1 = res.data?.token || 0
      //   })
      //   this.request("orders/seize_orderss", {
      //     s_id: uni.getStorageSync('schoolId'),
      //     type: 1,
      //     status: this.type,

      //   }).then(res => {
      //     this.nums2 = res.data?.token || 0

      //   })

      // } catch (error) {

      // }



      
      this.timeList = [
        { time: "00:00-23:59", count: 0 },
      ]
      this.request("Orders/historyMyOrderLists", {
        s_id: uni.getStorageSync('schoolId'),
        seize_orders_time: this.timeList[this.flg]?.time,
        status: this.type,
        type: this.typeFlg == 0 ? 3 : this.typeFlg
      }).then(res => {
        // this.nums=res.data.data.count

        // this.list = [{
        //     list: res.data.data.list
        // }]
        if (this.typeFlg == 0) {
          this.list = res.data.data.list.map(item => {
            return {
              ...item,
              list: [
                ...item.list,
              ]
            }
          })
        } else {
          this.list = res.data.data.list.map(item => {
            return {
              list: [item]
            }
          })

        }
      })
      return







      const self = this;
      app.globalData.util.request({
        url: 'orders/myOrderLst',
        data: {
          page: this.page,
          status: this.type,
          limit: 10
        },
        method: 'GET',
        success(res) {

          self.pullDown.end()

          if (self.page == 1) {
            self.setData({
              list: res.data.data.list
            });
          } else {
            for (var i = 0; i < res.data.data.list.length; i++) {
              self.setData({
                list: [...self.list, res.data.data.list[i]]
              });
            }
          }

          if (res.data.data.list.length == 0) {
            self.setData({
              loadmore: false
            });
          }
        }
      }, true);
    },

    tabSelect(e) {
      this.setData({
        TabCur: e.currentTarget.dataset.id,
        scrollLeft: e.currentTarget.dataset.id * 60,
        type: e.currentTarget.dataset.index
      });
      this.setData({
        page: 1,
        loadmore: true,
        list: []
      });
      this.getData();
    },

    getUsetInfo() {
      console.log('占位：函数 getUsetInfo 未声明');
    }
  }
};
</script>
<style lang="scss">
page {
  background: #F7F5F6;
}

.page-container {
  display: flex;
}

#cuIcon-homefills {
  width: 48rpx !important;
  position: relative !important;
  display: block !important;
  height: 48rpx !important;
  margin: 0 auto 10rpx !important;
  text-align: center !important;
  font-size: 40rpx !important;
}

#cuIcon-homefillt {
  width: 72rpx !important;
  position: absolute !important;
  display: block !important;
  height: 72rpx !important;
  margin: 0 auto 10rpx !important;
  text-align: center !important;
  font-size: 40rpx !important;
  top: 0;
  left: 0;
}

.indedx {
  color: #010101;
  font-size: 22rpx;
  padding: 10rpx 0 10rpx 0;
}

.indedxs {
  color: #12a6ee;
  font-size: 22rpx;
  margin-top: 10rpx;
  padding: -1rpx 0 10rpx 0;
  box-sizing: border-box;
}

.indedxt {
  color: #010101;
  font-size: 22rpx;
  padding: 10rpx 0 10rpx 0;
}

.text-white {
  color: #ff6344;
}

.cu-item {
  font-size: 30rpx;
}

.address {
  font-size: 28rpx;
}

.box {
  margin: 30rpx;
  border-radius: 10rpx;
}

.status_btn {
  background-color: #FEF5F5;
  color: #FF4C4D;
  font-size: 24rpx;
  width: 100rpx;
  text-align: center;
  padding: 10rpx 0;
  border-radius: 20rpx;
}

.time {
  color: #666666;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.addr_box {
  background-color: #F9F9F9;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-top: 20rpx;
}

.addr {
  font-size: 30rpx;
  font-weight: bold;
}

.circle {
  border: 6rpx solid #3792F5;
  background-color: white;
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.bule {
  border: 6rpx solid #3792F5;
}

.orange {
  border: 6rpx solid #FB4119;
}

.cuIcon-moreandroid {
  margin-left: -5rpx;
  color: grey;
}

.operate_box {
  .operate:first-child {
    margin-left: auto;
  }
}

.operate {
  border: 1rpx solid #E5E5E5;
  padding: 10rpx 30rpx;
  border-radius: 28rpx;
  color: #323232;
  // margin-left: auto;
}

.active {
  background-color: #FF4C4D;
  border: none;
  color: white;
}

@import "./main.scss";

</style>
